<template>
  <div class="products">
    {{ appName }}
  </div>
  <span class="status">
    <span :class="['status-circle', statusClass]"></span>
    {{ statusText }}
  </span>
  <div class="button-wrapper">
    <button class="content-button status-button" @click="handleButtonClick">{{ buttonText }}</button>
    <div class="menu">
      <button class="dropdown" @click="toggleDropdown"></button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const props = defineProps({
  appName: {
    type: String,
    default: 'Default App'
  },
  status: {
    type: String,
    default: 'Update Available'
  },
  buttonText: {
    type: String,
    default: 'Default Button'
  }
});

const statusClass = ref(props.status === 'Updated' ? 'green' : '');
const statusText = ref(props.status === 'Updated' ? 'Updated' : 'Update Available');

const dropdowns = ref([]);

const toggleDropdown = (e) => {
  e.stopPropagation();
  dropdowns.value.forEach((dropdown) => {
    dropdown.classList.remove('is-active');
  });
  e.target.classList.add('is-active');
};

const handleClickOutside = (e) => {
  const container = document.querySelector('.status-button');
  const dd = document.querySelector('.dropdown');
  if (!container.contains(e.target)) {
    dd?.classList.remove('is-active');
  }
};

const handleDropdownClick = (e) => {
  document.querySelector('.content-wrapper')?.classList.add('overlay');
  e.stopPropagation();
};

const handleDocumentClick = (e) => {
  if (!document.querySelector('.dropdown').contains(e.target)) {
    document.querySelector('.content-wrapper')?.classList.remove('overlay');
  }
};

onMounted(() => {
  const dropdownElements = document.querySelectorAll('.dropdown');
  dropdowns.value = Array.from(dropdownElements);

  dropdownElements.forEach((dropdown) => {
    dropdown.addEventListener('click', (e) => {
      toggleDropdown(e);
      handleDropdownClick(e);
    });
  });

  document.addEventListener('click', handleClickOutside);
  document.addEventListener('click', handleDocumentClick);
});

onUnmounted(() => {
  dropdowns.value.forEach((dropdown) => {
    dropdown.removeEventListener('click', toggleDropdown);
    dropdown.removeEventListener('click', handleDropdownClick);
  });

  document.removeEventListener('click', handleClickOutside);
  document.removeEventListener('click', handleDocumentClick);
});

const handleButtonClick = () => {
  // 处理按钮点击事件
};
</script>
<style>
@import url(../css/adobe-product.css);
</style>